<template>
	<div class="leave-word">
		<div class="discuss-card">
			<div class="discuss-card-header">切切</div>
			<div class="discuss-card-body">
				<input type="text" class="author" placeholder="你的名字" />
				<textarea class="write" placeholder="你想说的话"></textarea>
				<button type="button" class="submit">完 事</button>
			</div>
		</div>
		<div class="discuss-list">
			<div class="discuss-list-title">瞅一瞅，看一看</div>
			<div class="discuss-list-item">
				<div class="discuss-info">
					<span style="color: #fff;">留言者</span>
					<span class="discuss-time">2019/10/12</span>
				</div>
				<p class="discuss-content">这是我的第一条留言</p>
			</div>
			<div class="discuss-list-item">
				<div class="discuss-info">
					<span style="color: #fff;">留言者</span>
					<span class="discuss-time">2019/10/12</span>
				</div>
				<p class="discuss-content">这是我的第一条留言</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "leave-word"
	};
</script>

<style scoped>
	.leave-word {
		width: 100%;
		margin-top: 30px;
	}

	.discuss-card {
		width: 100%;
		border: 1px solid #999;
		border-radius: 10px;
		overflow: hidden;
	}

	.discuss-card-header {
		width: 100%;
		font-size: 18px;
		padding: 10px;
		font-weight: bold;
		background-color: #1e1e22;
		box-shadow: 1px 1px 25px 0 #0e0e0f;
	}

	.author {
		width: 100%;
		height: 45px;
		padding: 0 10px;
		background-color: transparent;
		border: 0;
		outline: 0;
		border-bottom: 1px solid pink;
		color: pink;
	}

	.write {
		width: 100%;
		height: 250px;
		background-color: transparent;
		border: 0;
		outline: none;
		color: #fff;
		padding: 10px;
		box-sizing: border-box;
		resize: none;
		overflow-y: auto;
	}

	.discuss-list {
		width: 100%;
		margin-top: 50px;
	}

	.discuss-list-item {
		border-bottom: 1px dashed #999;
		margin-bottom: 20px;
	}

	.discuss-list-title {
		font-size: 20px;
		margin-bottom: 20px;
		color: pink;
	}

	.discuss-content {
		padding-left: 1em;
	}

	.discuss-time {
		float: right;
		color: pink;
	}

	.submit {
		width: 100px;
		height: 40px;
		border: 1px dashed #999;
		background-color: transparent;
		color: pink;
		font-size: 18px;
		float: right;
		border-top-left-radius: 10px;
		margin-right: -5px;
		margin-bottom: -2px;
		cursor: pointer;
	}
</style>